<template>
    <div class="page company-view">
        <div class="date-picker">
            <div>统计日期段:</div>
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间" />
        </div>
        <div class="company-container">
            <div class="c-l">
                <div class="c-l-t">
                    <div class="card-title">
                        <span>公司下发</span>
                        <SvgIcon iconClass="refresh" style="font-size: 20px;font-weight: 700;"
                            @click="handleRefresh('feedback')" />
                    </div>
                    <div class="c-l-t-c">
                        <div class="c-l-t-c-i">
                            <div class="feedback-summary">
                                <DashboardChart style="width: 150px; height: 150px;" :data="feedbackSlight"
                                    :color="feedbackSlight.color" @click="handleToProblem(feedbackSlight)" />
                                <div class="c-l-t-c-i-desc c-l-t-c-i-desc-sli">
                                    <div class="desc-item">
                                        <span class="desc-value">{{ feedbackSlight.rectified }}</span>
                                        <span class="desc-label">整改</span>
                                    </div>
                                    <el-divider direction="vertical" />
                                    <div class="desc-item">
                                        <span class="desc-value">{{ feedbackSlight.unRectified }}</span>
                                        <span class="desc-label">未整改</span>
                                    </div>
                                </div>
                            </div>
                            <div class="feedback-dept-container">
                                <template v-if="feedbackSlight.deptList.length > 0">
                                    <div class="feedback-dept" v-for="(dept, j) in feedbackSlight.deptList" :key="j">
                                        <SvgIcon iconClass="arrow" style="font-size: 14px;color: #8255FB;" />
                                        <SvgIcon :iconClass="dept.icon"
                                            style="font-size: 30px;color: #8255FB;margin: 0 5px;" />
                                        <div class="dept">
                                            <div class="dept-count">{{ dept.problemTotal }}</div>
                                            <div class="dept-name">{{ dept.deptName }}</div>
                                        </div>
                                        <el-divider direction="vertical" />
                                        <BarChart style="height: 60px; flex: 1;" :data="dept" />
                                    </div>
                                </template>
                                <el-empty description="暂无数据" v-else />
                            </div>
                        </div>
                        <div class="c-l-t-c-i">
                            <div class="feedback-summary">
                                <DashboardChart style="width: 150px; height: 150px" :data="feedbackGeneral"
                                    :color="feedbackGeneral.color" @click="handleToProblem(feedbackGeneral)" />
                                <div class="c-l-t-c-i-desc c-l-t-c-i-desc-gen">
                                    <div class="desc-item">
                                        <span class="desc-value">{{ feedbackGeneral.rectified }}</span>
                                        <span class="desc-label">整改</span>
                                    </div>
                                    <el-divider direction="vertical" />
                                    <div class="desc-item">
                                        <span class="desc-value">{{ feedbackGeneral.unRectified }}</span>
                                        <span class="desc-label">未整改</span>
                                    </div>
                                </div>
                            </div>
                            <div class="feedback-dept-container">
                                <template v-if="feedbackGeneral.deptList.length > 0">
                                    <div class="feedback-dept" v-for="(dept, j) in feedbackGeneral.deptList" :key="j">
                                        <SvgIcon iconClass="arrow" style="font-size: 14px;color: #0CEDD0;" />
                                        <SvgIcon :iconClass="dept.icon"
                                            style="font-size: 30px;color: #0CEDD0;margin: 0 5px;" />
                                        <div class="dept">
                                            <div class="dept-count">{{ dept.problemTotal }}</div>
                                            <div class="dept-name">{{ dept.deptName }}</div>
                                        </div>
                                        <el-divider direction="vertical" />
                                        <BarChart style="height: 60px; flex: 1;" :data="dept" />
                                    </div>
                                </template>
                                <el-empty description="暂无数据" v-else />
                            </div>
                        </div>
                        <div class="c-l-t-c-i">
                            <div class="feedback-summary">
                                <DashboardChart style="width: 150px; height: 150px;" :data="feedbackSerious"
                                    :color="feedbackSerious.color" @click="handleToProblem(feedbackSerious)" />
                                <div class="c-l-t-c-i-desc c-l-t-c-i-desc-ser">
                                    <div class="desc-item">
                                        <span class="desc-value">{{ feedbackSerious.rectified }}</span>
                                        <span class="desc-label">整改</span>
                                    </div>
                                    <el-divider direction="vertical" />
                                    <div class="desc-item">
                                        <span class="desc-value">{{ feedbackSerious.unRectified }}</span>
                                        <span class="desc-label">未整改</span>
                                    </div>
                                </div>
                            </div>
                            <div class="feedback-dept-container">
                                <template v-if="feedbackSerious.deptList.length > 0">
                                    <div class="feedback-dept" v-for="(dept, j) in feedbackSerious.deptList" :key="j">
                                        <SvgIcon iconClass="arrow" style="font-size: 14px;color: #FFB62A;" />
                                        <SvgIcon :iconClass="dept.icon"
                                            style="font-size: 30px;color: #FFB62A;margin: 0 5px;" />
                                        <div class="dept">
                                            <div class="dept-count">{{ dept.problemTotal }}</div>
                                            <div class="dept-name">{{ dept.deptName }}</div>
                                        </div>
                                        <el-divider direction="vertical" />
                                        <BarChart style="height: 60px; flex: 1;" :data="dept" />
                                    </div>
                                </template>
                                <el-empty description="暂无数据" v-else />
                            </div>
                        </div>
                        <div class="c-l-t-c-i">
                            <div class="feedback-summary">
                                <DashboardChart style="width: 150px; height: 150px" :data="feedbackUrgent"
                                    :color="feedbackUrgent.color" @click="handleToProblem(feedbackUrgent)" />
                                <div class="c-l-t-c-i-desc c-l-t-c-i-desc-urg">
                                    <div class="desc-item">
                                        <span class="desc-value">{{ feedbackUrgent.rectified }}</span>
                                        <span class="desc-label">整改</span>
                                    </div>
                                    <el-divider direction="vertical" />
                                    <div class="desc-item">
                                        <span class="desc-value">{{ feedbackUrgent.unRectified }}</span>
                                        <span class="desc-label">未整改</span>
                                    </div>
                                </div>
                            </div>
                            <div class="feedback-dept-container">
                                <template v-if="feedbackUrgent.deptList.length > 0">
                                    <div class="feedback-dept" v-for="(dept, j) in feedbackUrgent.deptList" :key="j">
                                        <SvgIcon iconClass="arrow" style="font-size: 14px;color: #F2637B;" />
                                        <SvgIcon :iconClass="dept.icon"
                                            style="font-size: 30px;color: #F2637B;margin: 0 5px;" />
                                        <div class="dept">
                                            <div class="dept-count">{{ dept.problemTotal }}</div>
                                            <div class="dept-name">{{ dept.deptName }}</div>
                                        </div>
                                        <el-divider direction="vertical" />
                                        <BarChart style="height: 60px; flex: 1;" :data="dept" />
                                    </div>
                                </template>
                                <el-empty description="暂无数据" v-else />
                            </div>
                        </div>
                        <div class="c-l-t-c-i" style="width: 150px;">
                            <RoundChart style="width: 150px; height: 145px;" :data="warehouseSelf" />
                            <div class="self-feedback">
                                <div class="self-feedback-item">
                                    <div class="feedback-count">{{ warehouseSelf.rectified }}</div>
                                    <div class="feedback-label">整改</div>
                                </div>
                                <el-divider />
                                <div class="self-feedback-item">
                                    <div class="feedback-count">{{ warehouseSelf.unRectified }}</div>
                                    <div class="feedback-label">未整改</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c-l-b">
                    <div class="card-title">
                        <span>部门占比</span>
                        <SvgIcon iconClass="refresh" style="font-size: 20px;font-weight: 700;"
                            @click="handleRefresh('dept')" />
                    </div>
                    <div class="c-l-b-c">
                        <el-card class="c-l-b-i">
                            <template #header>
                                <div class="card-title-1">部门轻微占比</div>
                            </template>
                            <PieChart :data="deptRatioSlightList" />
                        </el-card>
                        <el-card class="c-l-b-i">
                            <template #header>
                                <div class="card-title-2">部门一般占比</div>
                            </template>
                            <PieChart :data="deptRatioGeneralList" />
                        </el-card>
                        <el-card class="c-l-b-i">
                            <template #header>
                                <div class="card-title-3">部门严重占比</div>
                            </template>
                            <PieChart :data="deptRatioSeriousList" />
                        </el-card>
                        <el-card class="c-l-b-i">
                            <template #header>
                                <div class="card-title-4">部门重大占比</div>
                            </template>
                            <PieChart :data="deptRatioUrgentList" />
                        </el-card>
                    </div>
                </div>
            </div>
            <div class="c-r">
                <div class="card-title" style="width: 300px;">
                    <span>油库人员</span>
                    <SvgIcon iconClass="refresh" style="font-size: 20px;font-weight: 700;"
                        @click="handleRefresh('user')" />
                </div>
                <div class="bar-content">
                    <template v-if="userList.length">
                        <BarCharts v-for="(item, i) in userList" :key="i" :gradients="gradients" :data="item"
                            style="width: 100%;height: 55px;" @click="handleToPer(item)" />
                    </template>
                    <el-empty description="暂无数据" v-else />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import DashboardChart from '@/components/echarts/dashboardChart.vue';
import BarChart from '@/components/echarts/barChart.vue';
import BarCharts from '@/components/echarts/barCharts.vue';
import PieChart from '@/components/echarts/pieChart.vue';
import RoundChart from '@/components/echarts/roundChart.vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter()
// import { login } from '@/api/index.ts';

const dateRange = ref<string[]>([])

// 定义渐变配置
const gradients = [
    // 第一条数据渐变
    {
        x: 0, y: 0, x2: 1, y2: 0,
        colorStops: [
            { offset: 0, color: '#BA8F10' },
            { offset: 1, color: '#FAD35A' }
        ]
    },
    // 第二条数据渐变
    {
        x: 0, y: 0, x2: 1, y2: 0,
        colorStops: [
            { offset: 0, color: '#315C91' },
            { offset: 1, color: '#35B8F7' }
        ]
    }
];

// 反馈级别 颜色 枚举 (可根据接口实际数据修改)
const FEED_COLOR_EUM = {
    "轻微": "#8255FB",
    "一般": "#0CEDD0",
    "严重": "#FFB62A",
    "紧急": "#F2637B"
}

// 部门列表icon 枚举 (可根据接口实际数据修改)
const DEPT_ICON_EUM = {
    "安全环保部": "safetyDept",
    "储运管理部": "tranMange",
    "人力资源部": "hr",
    "工程信息部": "engInfo",
    "检维修中心": "maintenance",
    "检验检定中心": "check",
    "党群工作部": "party",
    "信息管理部": "infoManage",
    "财务工作组": "finance",
}

// 部门列表类型
interface deptsType {
    deptName?: string;
    problemTotal?: number;
    rectified?: number;
    unRectified?: number;
    icon?: string;
}

// 反馈列表类型
interface FeedbackOverType {
    level?: string;
    id?: string;
    total?: number;
    rectified?: number;
    unRectified?: number;
    color?: string;
    deptList: deptsType[];
}

// 轻微
const feedbackSlight = ref<FeedbackOverType>({
    level: '轻微',
    total: 100,
    rectified: 20,
    unRectified: 80,
    id: "111",
    color: FEED_COLOR_EUM['轻微'],
    deptList: [
        {
            deptName: '人力资源部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['人力资源部']
        },
        {
            deptName: '储运管理部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['储运管理部']
        },
        {
            deptName: '安全环保部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['安全环保部']
        },
        {
            deptName: '检验检定中心',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['检验检定中心']
        },
        {
            deptName: '工程信息部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['工程信息部']
        },

        {
            deptName: '检维修中心',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['检维修中心']
        },
        {
            deptName: '党群工作部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['党群工作部']
        },
        {
            deptName: '信息管理部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['信息管理部']
        },
        {
            deptName: '财务工作组',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['财务工作组']
        },
    ]
})

// 获取轻微级别反馈数据
function getFeedbackSlight() {
    // getdata({ level:"轻微", dateRange: dateRange.value, id: oliId.value }).then(res => {
    //     feedbackSlight.value = res.data
    // })
}

// 一般
const feedbackGeneral = ref<FeedbackOverType>({
    level: '一般',
    total: 100,
    rectified: 40,
    unRectified: 60,
    id: "2",
    color: FEED_COLOR_EUM['一般'],
    deptList: [
        {
            deptName: '人力资源部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['人力资源部']
        },
        {
            deptName: '储运管理部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['储运管理部']
        },
        {
            deptName: '安全环保部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['安全环保部']
        },
        {
            deptName: '检验检定中心',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['检验检定中心']
        },
        {
            deptName: '工程信息部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['工程信息部']
        },

        {
            deptName: '检维修中心',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['检维修中心']
        },
        {
            deptName: '党群工作部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['党群工作部']
        },
        {
            deptName: '信息管理部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['信息管理部']
        },
        {
            deptName: '财务工作组',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['财务工作组']
        },
    ]
})

// 获取一般级别反馈数据
function getFeedbackGeneral() {
    // getdata({ level:"一般", dateRange: dateRange.value, id: oliId.value }).then(res => {
    //     feedbackGeneral.value = res.data
    // })
}

// 严重
const feedbackSerious = ref<FeedbackOverType>({
    level: '严重',
    total: 100,
    rectified: 30,
    unRectified: 70,
    color: FEED_COLOR_EUM['严重'],
    id: "3",
    deptList: [
        {
            deptName: '人力资源部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['人力资源部']
        },
        {
            deptName: '储运管理部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['储运管理部']
        },
        {
            deptName: '安全环保部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['安全环保部']
        },
        {
            deptName: '检验检定中心',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['检验检定中心']
        },
        {
            deptName: '工程信息部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['工程信息部']
        },

        {
            deptName: '检维修中心',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['检维修中心']
        },
        {
            deptName: '党群工作部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['党群工作部']
        },
        {
            deptName: '信息管理部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['信息管理部']
        },
        {
            deptName: '财务工作组',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['财务工作组']
        },
    ]
})

// 获取严重级别反馈数据
function getFeedbackSerious() {
    // getdata({ level:"严重", dateRange: dateRange.value, id: oliId.value }).then(res => {
    //     feedbackSerious.value = res.data
    // })
}

// 重大
const feedbackUrgent = ref<FeedbackOverType>({
    level: '重大',
    total: 100,
    rectified: 50,
    unRectified: 50,
    id: "4",
    color: FEED_COLOR_EUM['紧急'],
    deptList: [
        {
            deptName: '人力资源部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['人力资源部']
        },
        {
            deptName: '储运管理部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['储运管理部']
        },
        {
            deptName: '安全环保部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['安全环保部']
        },
        {
            deptName: '检验检定中心',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['检验检定中心']
        },
        {
            deptName: '工程信息部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['工程信息部']
        },

        {
            deptName: '检维修中心',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['检维修中心']
        },
        {
            deptName: '党群工作部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['党群工作部']
        },
        {
            deptName: '信息管理部',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['信息管理部']
        },
        {
            deptName: '财务工作组',
            problemTotal: 100,
            rectified: 20,
            unRectified: 80,
            icon: DEPT_ICON_EUM['财务工作组']
        },
    ]
})

// 获取重大级别反馈数据
function getFeedbackUrgent() {
    // getdata({ level:"重大", dateRange: dateRange.value, id: oliId.value }).then(res => {
    //     feedbackUrgent.value = res.data
    // })
}

interface WarehouseSelfType {
    name: string;
    total: number;
    rectified: number;
    id?: string;
    unRectified: number;
}

const warehouseSelf = ref<WarehouseSelfType>({
    name: "油库自查",
    total: 100,
    rectified: 80,
    unRectified: 20,
    id: "11",
})

// 获取油库自查数据
function getWarehouseSelf() {
    // getdata({ dateRange: dateRange.value, id: oliId.value }).then(res => {
    //     warehouseSelf.value = res.data
    // })
}

// 部门占比数据类型
interface deptRatioType {
    name: string;
    value: string;
}
// 轻微部门占比数据
const deptRatioSlightList = ref<deptRatioType[]>([
    { name: '安全环保部', value: '1050' },
    { name: '储运管理部', value: '1150' },
    { name: '人力资源部', value: '1150' },
    { name: '检验检定中心', value: '1250' },
    { name: '工程信息部', value: '1450' },
    { name: '检维修中心', value: '1650' },
    { name: '党群工作部', value: '1750' },
    { name: '信息管理部', value: '1350' },
    { name: '财务工作组', value: '1250' },
])
function getDeptRatioSlightList() {
    // getdata({ level:"轻微", dateRange: dateRange.value, id: oliId.value }).then(res => {
    //     deptRatioSlightList.value = res.data
    // })
}

// 一般部门占比数据
const deptRatioGeneralList = ref<deptRatioType[]>([
    { name: '安全环保部', value: '1050' },
    { name: '储运管理部', value: '1650' },
    { name: '人力资源部', value: '1150' },
    { name: '检验检定中心', value: '1250' },
    { name: '工程信息部', value: '1450' },
    { name: '检维修中心', value: '1650' },
    { name: '党群工作部', value: '1750' },
    { name: '信息管理部', value: '1750' },
    { name: '财务工作组', value: '1750' },
])
function getDeptRatioGeneralList() {
    // getdata({ level:"一般", dateRange: dateRange.value, id: oliId.value }).then(res => {
    //     deptRatioGeneralList.value = res.data
    // })
}

// 严重部门占比数据
const deptRatioSeriousList = ref<deptRatioType[]>([
    { name: '安全环保部', value: '1050' },
    { name: '储运管理部', value: '1650' },
    { name: '人力资源部', value: '1150' },
    { name: '检验检定中心', value: '1750' },
    { name: '工程信息部', value: '1750' },
    { name: '检维修中心', value: '1750' },
    { name: '党群工作部', value: '1750' },
    { name: '信息管理部', value: '1750' },
    { name: '财务工作组', value: '1750' },
])

function getDeptRatioSeriousList() {
    // getdata({ level:"严重", dateRange: dateRange.value, id: oliId.value }).then(res => {
    //     deptRatioSeriousList.value = res.data
    // })
}

// 重大部门占比数据
const deptRatioUrgentList = ref<deptRatioType[]>([
    { name: '安全环保部', value: '1250' },
    { name: '储运管理部', value: '1650' },
    { name: '人力资源部', value: '750' },
    { name: '检验检定中心', value: '1750' },
    { name: '工程信息部', value: '1750' },
    { name: '检维修中心', value: '1750' },
    { name: '党群工作部', value: '1750' },
    { name: '信息管理部', value: '1750' },
    { name: '财务工作组', value: '1750' },
])
function getDeptRatioUrgentList() {
    // getdata({ level:"重大", dateRange: dateRange.value, id: oliId.value }).then(res => {
    //     deptRatioUrgentList.value = res.data
    // })
}

interface UserType {
    name: string;
    total: number;
    rectified: number;
    id?: string;
    unRectified: number;
}

const userList = ref<UserType[]>([
    {
        name: "张三",
        total: 100,
        rectified: 20,
        unRectified: 80,
        id: "1"
    },
    {
        name: "李四",
        total: 100,
        rectified: 20,
        unRectified: 80,
        id: "2"
    },
])
function getUserList() {
    // getdata({ dateRange: dateRange.value,  id: oliId.value }).then(res => {
    //     userList.value = res.data
    // })
}

const route = useRoute();
const oliId = ref<string>("");
onMounted(() => {
    oliId.value = route.query.id as string;
    getFeedbackSlight();
    getFeedbackGeneral();
    getFeedbackSerious();
    getFeedbackUrgent();
    getWarehouseSelf();
    getDeptRatioSlightList();
    getDeptRatioGeneralList();
    getDeptRatioSeriousList();
    getDeptRatioUrgentList();
    getUserList();
});

// 刷新
function handleRefresh(type: string) {
    switch (type) {
        case 'feedback':
            //  刷新反馈
            getFeedbackSlight();
            getFeedbackGeneral();
            getFeedbackSerious();
            getFeedbackUrgent();
            getWarehouseSelf();
            break;
        case 'dept':
            // 刷新部门
            getDeptRatioSlightList();
            getDeptRatioGeneralList();
            getDeptRatioSeriousList();
            getDeptRatioUrgentList();
            break;
        case 'user':
            // 刷新人员列表
            getUserList();
            break;
    }
}

// 跳转问题展示页
function handleToProblem(data: FeedbackOverType) {
    const targetUrl = router.resolve({ path: "/problem", query: { id: data.id, level: data.level } }).href;
    window.open(targetUrl, '_blank');
}

// 跳转到个人展示页
function handleToPer(data: UserType) {
    console.log(data);
    // return
    const targetUrl = router.resolve({ path: "/person", query: { id: data.id } }).href;
    window.open(targetUrl, '_blank');

}


</script>

<style lang="scss" scoped>
@import url('../styles/company.scss');
</style>